* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  font-family: 'Arial', sans-serif;
}

.blue {
  position: absolute;
  left: 106px;
  top: 81px;
  width: 16.15px;
  height: 15px;
  opacity: 1;
  background: rgba(0, 40, 252, 1);
}

.design {
  position: absolute;
  left: 813px;
  top: 78px;
  width: 242px;
  height: 21px;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 21px;
  color: rgba(255, 255, 255, 1);
}

.cat {
  position: absolute;
  left: 1617px;
  top: 78px;
  width: 189px;
  height: 21px;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 21px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
}

.cont {
  position: absolute;
  left: 134px;
  top: 77px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;


}

.cantainer {
  position: absolute;
  left: 134px;
  top: 117px;
  width: 1700px;
  height: 793px;
  opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.pic {
  width: 250px;
  height: 249px;
  opacity: 1;
  overflow: hidden;
  box-shadow: 10px 10px 10px rgba(229, 202, 206, 0.65);

}

.pic img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  width: 332px;
  height: 94px;
  opacity: 1;
}

.cantainer .name {
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 94px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;

}

.docu {
  width: 466px;
  height: 225px;
  opacity: 1;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 45px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
}

.list {
  width: 180px;
  height: 52px;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  display: flex;
  margin-top: 5px;
}

.li {
  height: 52px;
  width: 180px;
  border-radius: 26px;
  border: 0.8px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 52px;
  margin: 5px;
  margin-top: 10px;
  box-shadow: 0 10px 10px rgb(229, 202, 206);
}

.my {
  opacity: 1;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 78px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;

}

.right {
  position: absolute;
  left: 840px;
  top: 410px;
  width: 972px;
  height: 360px;
}

.tit {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0px;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
}

li {
  list-style: square;
  color: rgba(0, 40, 252, 1);
}

p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
}

.box {
  width: 16.15px;
  height: 15px;
  opacity: 1;
  background: rgba(0, 40, 252, 1);

}

.cricle {
  position: absolute;
  left: 1579px;
  top: 207px;
  width: 225px;
  height: 222px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(18, 42, 162), rgb(64, 74, 121));
  box-shadow: 10px 10px 10px rgba(67, 91, 211, 0.73);

}

.cricle img {
  width: 225px;
  height: 222px;
  object-fit: cover;
}

.cricle .p1 {
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 18px;
  color: rgba(255, 255, 255, 1);
  left: 1654px;
  top: 266px;

  transform: translate(80px, -190px);

}

.cricle .p2 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 34px;
  color: rgba(255, 255, 255, 1);
  transform: translate(50px, -180px);
}

.cricle .p3 {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 62px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
  transform: translate(55px, -180px);
}